<script lang="ts" setup>
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useForm, useTable } from '@/hooks'
import { TimeTemplateApi } from '@/apis'

const emits = defineEmits(['select'])
const visible = ref<boolean>(false)

const { resetForm } = useForm({
  keyword: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
} = useTable(() => TimeTemplateApi.getList(), { immediate: false })

const columns: TableInstanceColumns[] = [
  // {
  //   title: '序号',
  //   width: 66,
  //   align: 'center',
  //   fixed: 'left',
  //   render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  // },
  { title: '名称', dataIndex: 'name' },
  { title: '开始时间', dataIndex: 'startTime' },
  { title: '结束时间', dataIndex: 'endTime' },
  {
    title: '操作',
    slotName: 'action',
    width: 80,
    align: 'center',
    fixed: 'right',
  },
]

const handleCancel = () => {
  visible.value = false
}

const open = () => {
  visible.value = true
  search()
}

const onSelect = (record) => {
  emits('select', record)
  visible.value = false
}

const refresh = () => {
  resetForm()
  search()
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal v-model:visible="visible" title="时间段选择" width="900px" :footer="false" @cancel="handleCancel">
    <div class="h-45vh">
      <ProTable
        :data="tableData"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        show-index
        @refresh="refresh"
      >
        <template #action="{ record }">
          <a-space>
            <a-link @click="onSelect(record)">
              选择
            </a-link>
          </a-space>
        </template>
      </ProTable>
    </div>
  </a-modal>
</template>
